
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuchekong"></use>
                    </svg>
                    <div class="name">购物车空</div>
                    <div class="fontclass">#icon-gouwuchekong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuche"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-gouwuche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingtong"></use>
                    </svg>
                    <div class="name">婴童</div>
                    <div class="fontclass">#icon-yingtong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangdajing"></use>
                    </svg>
                    <div class="name">放大镜</div>
                    <div class="fontclass">#icon-fangdajing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouji"></use>
                    </svg>
                    <div class="name">手机</div>
                    <div class="fontclass">#icon-shouji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yi"></use>
                    </svg>
                    <div class="name">易</div>
                    <div class="fontclass">#icon-yi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tongzhuangmuying"></use>
                    </svg>
                    <div class="name">童装母婴</div>
                    <div class="fontclass">#icon-tongzhuangmuying</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-taideng"></use>
                    </svg>
                    <div class="name">台灯</div>
                    <div class="fontclass">#icon-taideng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shenghuodianqi"></use>
                    </svg>
                    <div class="name">生活电器</div>
                    <div class="fontclass">#icon-shenghuodianqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tub3"></use>
                    </svg>
                    <div class="name">抱枕</div>
                    <div class="fontclass">#icon-tub3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanzhong"></use>
                    </svg>
                    <div class="name">选中</div>
                    <div class="fontclass">#icon-xuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ertongmuying"></use>
                    </svg>
                    <div class="name">儿童母婴</div>
                    <div class="fontclass">#icon-ertongmuying</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiaju"></use>
                    </svg>
                    <div class="name">家具</div>
                    <div class="fontclass">#icon-jiaju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-meirongxihu"></use>
                    </svg>
                    <div class="name">美容洗护</div>
                    <div class="fontclass">#icon-meirongxihu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanti"></use>
                    </svg>
                    <div class="name">专题</div>
                    <div class="fontclass">#icon-zhuanti</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhuang"></use>
                    </svg>
                    <div class="name">服装</div>
                    <div class="fontclass">#icon-fuzhuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-youhuiquan"></use>
                    </svg>
                    <div class="name">youhuiquan</div>
                    <div class="fontclass">#icon-youhuiquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiezi"></use>
                    </svg>
                    <div class="name">鞋子</div>
                    <div class="fontclass">#icon-xiezi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-31shengbo"></use>
                    </svg>
                    <div class="name">3.1 声波</div>
                    <div class="fontclass">#icon-31shengbo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon037"></use>
                    </svg>
                    <div class="name">服装</div>
                    <div class="fontclass">#icon-icon037</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nvzhuang01"></use>
                    </svg>
                    <div class="name">女士服装</div>
                    <div class="fontclass">#icon-nvzhuang01</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontmeirongxihu"></use>
                    </svg>
                    <div class="name">美容洗护</div>
                    <div class="fontclass">#icon-iconfontmeirongxihu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xihu"></use>
                    </svg>
                    <div class="name">洗护</div>
                    <div class="fontclass">#icon-xihu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingyouertongjie"></use>
                    </svg>
                    <div class="name">婴幼儿童街</div>
                    <div class="fontclass">#icon-yingyouertongjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zahuopu"></use>
                    </svg>
                    <div class="name">杂货铺</div>
                    <div class="fontclass">#icon-zahuopu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingwei"></use>
                    </svg>
                    <div class="name">dingwei</div>
                    <div class="fontclass">#icon-dingwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-libao"></use>
                    </svg>
                    <div class="name">礼包</div>
                    <div class="fontclass">#icon-libao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arrowDown"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-arrowDown</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huanhui"></use>
                    </svg>
                    <div class="name">还回</div>
                    <div class="fontclass">#icon-huanhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-can"></use>
                    </svg>
                    <div class="name">餐</div>
                    <div class="fontclass">#icon-can</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zaliang"></use>
                    </svg>
                    <div class="name">杂粮</div>
                    <div class="fontclass">#icon-zaliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuwei"></use>
                    </svg>
                    <div class="name">厨卫</div>
                    <div class="fontclass">#icon-chuwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dizhi"></use>
                    </svg>
                    <div class="name">dizhi</div>
                    <div class="fontclass">#icon-dizhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zfb"></use>
                    </svg>
                    <div class="name">zfb</div>
                    <div class="fontclass">#icon-zfb</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-navhomeicon"></use>
                    </svg>
                    <div class="name">导航 首页 房子 屋子 icon</div>
                    <div class="fontclass">#icon-navhomeicon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou-copy-copy"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-jiantou-copy-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zazhi"></use>
                    </svg>
                    <div class="name">杂志</div>
                    <div class="fontclass">#icon-zazhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-thinleft"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-thinleft</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qiangzhi"></use>
                    </svg>
                    <div class="name">墙纸</div>
                    <div class="fontclass">#icon-qiangzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou-copy"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-jiantou-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu"></use>
                    </svg>
                    <div class="name">客服</div>
                    <div class="fontclass">#icon-kefu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huaxian"></use>
                    </svg>
                    <div class="name">花-线</div>
                    <div class="fontclass">#icon-huaxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuweicanju"></use>
                    </svg>
                    <div class="name">厨卫餐具</div>
                    <div class="fontclass">#icon-chuweicanju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nantong"></use>
                    </svg>
                    <div class="name">男童</div>
                    <div class="fontclass">#icon-nantong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wujiaoxing"></use>
                    </svg>
                    <div class="name">五角星</div>
                    <div class="fontclass">#icon-wujiaoxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanti1"></use>
                    </svg>
                    <div class="name">专题</div>
                    <div class="fontclass">#icon-zhuanti1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-xiaoxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-x1"></use>
                    </svg>
                    <div class="name">X </div>
                    <div class="fontclass">#icon-x1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peijian"></use>
                    </svg>
                    <div class="name">配件</div>
                    <div class="fontclass">#icon-peijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianhua"></use>
                    </svg>
                    <div class="name">dianhua</div>
                    <div class="fontclass">#icon-dianhua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-muyingertongyongpinwanju"></use>
                    </svg>
                    <div class="name">母婴儿童用品玩具</div>
                    <div class="fontclass">#icon-muyingertongyongpinwanju</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanti2"></use>
                    </svg>
                    <div class="name">专题</div>
                    <div class="fontclass">#icon-zhuanti2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi1"></use>
                    </svg>
                    <div class="name">消息</div>
                    <div class="fontclass">#icon-xiaoxi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-diannaopeijian"></use>
                    </svg>
                    <div class="name">电脑配件</div>
                    <div class="fontclass">#icon-diannaopeijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-changfa"></use>
                    </svg>
                    <div class="name">长发</div>
                    <div class="fontclass">#icon-changfa</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconsanjiaoxing"></use>
                    </svg>
                    <div class="name">icon - 三角形</div>
                    <div class="fontclass">#icon-iconsanjiaoxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xingqiu"></use>
                    </svg>
                    <div class="name">星球</div>
                    <div class="fontclass">#icon-xingqiu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xihumuyu"></use>
                    </svg>
                    <div class="name">洗护沐浴</div>
                    <div class="fontclass">#icon-xihumuyu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhiyunlogo"></use>
                    </svg>
                    <div class="name">智云</div>
                    <div class="fontclass">#icon-zhiyunlogo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-q"></use>
                    </svg>
                    <div class="name">Q</div>
                    <div class="fontclass">#icon-q</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wuliu"></use>
                    </svg>
                    <div class="name">物流</div>
                    <div class="fontclass">#icon-wuliu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhuang1"></use>
                    </svg>
                    <div class="name">服装</div>
                    <div class="fontclass">#icon-fuzhuang1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhidao"></use>
                    </svg>
                    <div class="name">智岛</div>
                    <div class="fontclass">#icon-zhidao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shumapeijian"></use>
                    </svg>
                    <div class="name">数码_配件</div>
                    <div class="fontclass">#icon-shumapeijian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yingtongfushi"></use>
                    </svg>
                    <div class="name">婴童服饰</div>
                    <div class="fontclass">#icon-yingtongfushi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanti3"></use>
                    </svg>
                    <div class="name">专题</div>
                    <div class="fontclass">#icon-zhuanti3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangqu"></use>
                    </svg>
                    <div class="name">xin</div>
                    <div class="fontclass">#icon-xiangqu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dunpai"></use>
                    </svg>
                    <div class="name">盾牌</div>
                    <div class="fontclass">#icon-dunpai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fangda"></use>
                    </svg>
                    <div class="name">放大</div>
                    <div class="fontclass">#icon-fangda</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hua"></use>
                    </svg>
                    <div class="name">花</div>
                    <div class="fontclass">#icon-hua</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-leimupinleifenleileibie"></use>
                    </svg>
                    <div class="name">类目 品类 分类 类别</div>
                    <div class="fontclass">#icon-leimupinleifenleileibie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ertong"></use>
                    </svg>
                    <div class="name">儿童</div>
                    <div class="fontclass">#icon-ertong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanti4"></use>
                    </svg>
                    <div class="name">专题</div>
                    <div class="fontclass">#icon-zhuanti4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peijian1"></use>
                    </svg>
                    <div class="name">配件</div>
                    <div class="fontclass">#icon-peijian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-biyan"></use>
                    </svg>
                    <div class="name">闭眼</div>
                    <div class="fontclass">#icon-biyan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-quanshengzhengzhuang"></use>
                    </svg>
                    <div class="name">儿童</div>
                    <div class="fontclass">#icon-quanshengzhengzhuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhuang2"></use>
                    </svg>
                    <div class="name">服装</div>
                    <div class="fontclass">#icon-fuzhuang2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuanzhong1"></use>
                    </svg>
                    <div class="name">选中</div>
                    <div class="fontclass">#icon-xuanzhong1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peijian2"></use>
                    </svg>
                    <div class="name">配件</div>
                    <div class="fontclass">#icon-peijian2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sanjiaoxing"></use>
                    </svg>
                    <div class="name">sanjiaoxing</div>
                    <div class="fontclass">#icon-sanjiaoxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-canchulei-default"></use>
                    </svg>
                    <div class="name">餐厨类-default</div>
                    <div class="fontclass">#icon-canchulei-default</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhinanzhen"></use>
                    </svg>
                    <div class="name">指南针</div>
                    <div class="fontclass">#icon-zhinanzhen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhenbiechaxun"></use>
                    </svg>
                    <div class="name">甄别查询</div>
                    <div class="fontclass">#icon-zhenbiechaxun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                    <div class="name">微博</div>
                    <div class="fontclass">#icon-weibo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qinza"></use>
                    </svg>
                    <div class="name">勤杂</div>
                    <div class="fontclass">#icon-qinza</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sijiantao"></use>
                    </svg>
                    <div class="name">四件套</div>
                    <div class="fontclass">#icon-sijiantao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ds"></use>
                    </svg>
                    <div class="name">宝智</div>
                    <div class="fontclass">#icon-ds</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-qinza1"></use>
                    </svg>
                    <div class="name">勤杂</div>
                    <div class="fontclass">#icon-qinza1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia"></use>
                    </svg>
                    <div class="name">jia</div>
                    <div class="fontclass">#icon-jia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sanchu"></use>
                    </svg>
                    <div class="name">sanchu</div>
                    <div class="fontclass">#icon-sanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bi"></use>
                    </svg>
                    <div class="name">笔</div>
                    <div class="fontclass">#icon-bi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengfangxinggouxuankuangweixuanzhong"></use>
                    </svg>
                    <div class="name">正方形勾选框-未选中</div>
                    <div class="fontclass">#icon-zhengfangxinggouxuankuangweixuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangpin-xianxing"></use>
                    </svg>
                    <div class="name">06商品-线性</div>
                    <div class="fontclass">#icon-shangpin-xianxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chongwu"></use>
                    </svg>
                    <div class="name">宠物</div>
                    <div class="fontclass">#icon-chongwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfontdanquxunhuan2eps"></use>
                    </svg>
                    <div class="name">循环</div>
                    <div class="fontclass">#icon-iconfontdanquxunhuan2eps</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xihu1"></use>
                    </svg>
                    <div class="name">洗护</div>
                    <div class="fontclass">#icon-xihu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chuwei1"></use>
                    </svg>
                    <div class="name">厨卫</div>
                    <div class="fontclass">#icon-chuwei1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <div class="name">微信</div>
                    <div class="fontclass">#icon-weixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-arr-up"></use>
                    </svg>
                    <div class="name">三角形</div>
                    <div class="fontclass">#icon-arr-up</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hougun"></use>
                    </svg>
                    <div class="name">后退</div>
                    <div class="fontclass">#icon-hougun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhuang3"></use>
                    </svg>
                    <div class="name">服装</div>
                    <div class="fontclass">#icon-fuzhuang3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jingyin"></use>
                    </svg>
                    <div class="name">静音</div>
                    <div class="fontclass">#icon-jingyin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-MOKEEmoqu"></use>
                    </svg>
                    <div class="name">MOKEE魔趣</div>
                    <div class="fontclass">#icon-MOKEEmoqu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zanting"></use>
                    </svg>
                    <div class="name">暂停</div>
                    <div class="fontclass">#icon-zanting</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xuan"></use>
                    </svg>
                    <div class="name">选</div>
                    <div class="fontclass">#icon-xuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gouwuche1"></use>
                    </svg>
                    <div class="name">购物车</div>
                    <div class="fontclass">#icon-gouwuche1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodequdan"></use>
                    </svg>
                    <div class="name">我的趣单</div>
                    <div class="fontclass">#icon-wodequdan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dingbu"></use>
                    </svg>
                    <div class="name">回到顶部</div>
                    <div class="fontclass">#icon-dingbu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peijian3"></use>
                    </svg>
                    <div class="name">配件</div>
                    <div class="fontclass">#icon-peijian3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanti5"></use>
                    </svg>
                    <div class="name">专题</div>
                    <div class="fontclass">#icon-zhuanti5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peijian4"></use>
                    </svg>
                    <div class="name">配件</div>
                    <div class="fontclass">#icon-peijian4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-peijian5"></use>
                    </svg>
                    <div class="name">配件</div>
                    <div class="fontclass">#icon-peijian5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yinliang"></use>
                    </svg>
                    <div class="name">音量</div>
                    <div class="fontclass">#icon-yinliang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhengyan"></use>
                    </svg>
                    <div class="name">睁眼</div>
                    <div class="fontclass">#icon-zhengyan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wanquxuanze"></use>
                    </svg>
                    <div class="name">玩趣选择</div>
                    <div class="fontclass">#icon-wanquxuanze</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wanquxuanze1"></use>
                    </svg>
                    <div class="name">玩趣选择</div>
                    <div class="fontclass">#icon-wanquxuanze1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-meifuxihu"></use>
                    </svg>
                    <div class="name">美肤洗护</div>
                    <div class="fontclass">#icon-meifuxihu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhishu"></use>
                    </svg>
                    <div class="name">智数</div>
                    <div class="fontclass">#icon-zhishu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shandian"></use>
                    </svg>
                    <div class="name">闪电</div>
                    <div class="fontclass">#icon-shandian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shujuzhenxuan"></use>
                    </svg>
                    <div class="name">数据甄选</div>
                    <div class="fontclass">#icon-shujuzhenxuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiazai"></use>
                    </svg>
                    <div class="name">加载</div>
                    <div class="fontclass">#icon-jiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhuang4"></use>
                    </svg>
                    <div class="name">服装</div>
                    <div class="fontclass">#icon-fuzhuang4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuaijin"></use>
                    </svg>
                    <div class="name">后退</div>
                    <div class="fontclass">#icon-kuaijin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhifaicon"></use>
                    </svg>
                    <div class="name">直发icon</div>
                    <div class="fontclass">#icon-zhifaicon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rentou"></use>
                    </svg>
                    <div class="name">人头</div>
                    <div class="fontclass">#icon-rentou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaomifeng-copy"></use>
                    </svg>
                    <div class="name">小蜜蜂</div>
                    <div class="fontclass">#icon-xiaomifeng-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-flyme_icon-"></use>
                    </svg>
                    <div class="name">随机</div>
                    <div class="fontclass">#icon-flyme_icon-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yuan"></use>
                    </svg>
                    <div class="name">园</div>
                    <div class="fontclass">#icon-yuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-up"></use>
                    </svg>
                    <div class="name">三角下标（正方形）</div>
                    <div class="fontclass">#icon-icon-up</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
